<template>
    <view class="on-sale" v-if="list.length">
        <view class="on-sale__header">
            <text class="label">天天特价</text>
            <image class="hot" src="@/static/images/on-sale-hot.png" />
            <button class="on-sale__refresh-btn" @click="next">换一批</button>
        </view>

        <view class="on-sale__container">
            <view
                class="on-sale__item"
                v-for="(item, index) in list"
                :key="index"
                @tap="toBuy(item, 'tttj', '')"
            >
                <image :src="item.pic" />
                <text>￥{{ item.endPrice }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
import BuyMixin from '@/mixins/buy';

export default {
    data() {
        return {
            list: [],
            pagination: {
                page: 1,
                size: 4
            }
        };
    },

    mixins: [BuyMixin],

    computed: {
        ...mapGetters(['userInfo'])
    },

    mounted() {
        this.refresh();
    },

    methods: {
        refresh(params) {
            this.$service.wxjlj
                .specialGoods({
                    ...this.pagination,
                    ...params,
                    order: 'level',
                    sort: 'desc'
                })
                .then(res => {
                    this.list = res.list;
                    this.pagination = res.pagination;
                });
        },

        next() {
            uni.reportAnalytics('click_changebtn');
            const { page, size, total } = this.pagination;
            this.refresh({
                page: total > page * size ? page + 1 : 1
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.on-sale {
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 16rpx;

    &__header {
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        height: 80rpx;
        background-image: linear-gradient(to bottom, #ffdfe9, #fff);
        border-radius: 16rpx 16rpx 0 0;

        .hot {
            height: 38rpx;
            width: 186rpx;
        }

        .label {
            color: #1d1d1d;
            font-size: 32rpx;
            font-weight: 500;
            margin-right: 20rpx;
        }
    }

    &__refresh-btn {
        font-size: 28rpx;
        background-color: transparent;
        position: absolute;
        right: 20rpx;
        color: #ff3b71;
        font-size: 24rpx;

        &::after {
            border: 0;
        }
    }

    &__container {
        display: flex;
        height: 200rpx;
        padding: 20rpx 10rpx;
    }

    &__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        image {
            height: 148rpx;
            width: 148rpx;
            margin-bottom: 10rpx;
            border-radius: 10rpx;
        }

        text {
            color: #f70114;
            font-size: 32rpx;
            font-weight: 500;
        }
    }
}
</style>
